<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索结果</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link href="../../static/bootstrap/css/search_result.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script language="JavaScript">

            function heart() {
                var heart = document.getElementById("heart");

                if(heart.src === "http://127.0.0.1:8000/static/svg/heart.svg"){
                    alert("已添加至最爱");
                }
            }

            function star(){
                var star = document.getElementById("star");
                if(star.src === "http://127.0.0.1:8000/static/svg/star.svg"){
                    alert("已添加收藏");
                }
            }

            function thumb(){
                var thumb = document.getElementById("thumb");
                if(thumb.src === "http://127.0.0.1:8000/static/svg/thumbsup.svg"){
                    alert("已点赞");
                }
            }

    </script>
</head>
<body>
{% include 'head.html' %}
{% include 'search_result_nav.html' %}
    <div class="result" id = "res">
        <div class="divider"> </div>
        {%for title,catagory,image,author,isbn in search_result%}
        <div class="book_res">
            <img src={{ image }} alt="...">
            <ul>
                <li>书名 : {{ title }}</li>
                <li>种类 : {{ catagory }}</li>
                <li>作者 : {{ author }}</li>
                <li>ISBN : {{ isbn }}</li>
            </ul>
        <div class="like">
            <button type="button"><img id = "heart" src="../../static/svg/heart.svg" onclick="heart();"></button>
            <button type="button"><img id = "star" src="../../static/svg/star.svg" onclick="star();"></button>
            <button type="button"><img id = "thumb" src="../../static/svg/thumbsup.svg" onclick="thumb();"></button>
        </div>
        <div class="clearfix">
            <form action= "content"><button type="submit" class="btn btn-outline-success"><input type="hidden" name = 'id' value = {{ isbn }}>查看详情</button></form>
        </div>
        </div>

        <div class="divider"> </div>
        {%endfor%}
    </div>
{% include 'bottom.html'%}
</body>
</html>